<template>
  <div class="goods_edit_box">
    <leftnav></leftnav>
    <div class="content">
      <div class="top_nav">
        <topnav></topnav>
      </div>
      <div class="content_box">
        <div class="content_head">
          <div class="head_left">商品编辑goods_edit</div>
          <div class="head_right" @click="fanhuifn">返回列表</div>
        </div>
        <div class="content_item">
          <div class="shangPing_name row_i">
            <span>商品名称：</span>
            <div class="inputS"><el-input v-model="productobj.goods_name" placeholder="请输入内容"></el-input></div>
          </div>
          <div class="shangPing_jiaGe row_i">
            <span>商品价格：</span>
            <div class="inputS"><el-input v-model="productobj.goods_present_price" placeholder="请输入内容"></el-input></div>
          </div>
          <div class="shangPing_tuiJian row_i">
            <span>是否推荐：</span>
            <el-radio v-model="productobj.goods_is_recommend" :label="2">是</el-radio>
            <el-radio v-model="productobj.goods_is_recommend" :label="1">否</el-radio>
          </div>
          <div class="shangPing_fenLei row_i">
            <span>商品分类：</span>
            <div class="inputS">
              <el-select style="width: 400px" v-model="productobj.goods_cate_id" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.goods_cate_id"
                :label="item.goods_cate_name"
                :value="item.goods_cate_id">
              </el-option>
              </el-select>
            </div>
          </div>
          <div class="shangPing_yuanJia row_i">
            <span>商品原价：</span>
            <div class="inputS"><el-input v-model="productobj.goods_original_price" placeholder="请输入内容"></el-input></div>
          </div>
          <div class="shangPing_miaoSu row_i">
            <span>商品描述：</span>
            <div class="inputS"><el-input v-model="productobj.goods_describe" placeholder="请输入内容"></el-input></div>
          </div>
          <div class="shangPing_img row_i"  v-for="item in upimg">
            <span>商品图片：</span>
            <div class="divbox">上传图片</div>
            <br />
            <img style="width: 50px" :src="item.img">
          </div>
          <div class="shangPing_xinZeng row_i">
            <div class="divbox divbox2">新增</div>
          </div>
          <div class="shangPing_baoCun row_i">
            <div class="divbox divbox2" @click="baocunfn">保存</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import Topnav from "../../../components/nav/topnav";
    import Leftnav from "../../../components/nav/leftnav";
    export default {
      components: {Topnav, Leftnav},
      data() {
        return {
          upimg:[],
          options:[],
          goods_id:'',
          productobj:{
            goods_cate_id:'',
            goods_describe:'',
            goods_id:'',
            goods_imgs:'',
            goods_is_recommend:'',
            goods_name:'',
            goods_original_price:'',
            goods_present_price:'',
          },
        }
      },
      methods: {
        baocunfn() {
          //修改商品数据
          this.$router.push({path:'home'})
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          let _this = this
          this.productobj.goods_imgs = upimg
          var data = this.productobj
          $.ajax({
            url: this.apis+'/admin/Goods/GoodsSave',
            data:data,
            type:'post',
            headers:{
              'token':localStorage.getItem('token')
            },
            success:function (res) {
              if(res.code==1){
                _this.$message({
                  message: '新增成功',
                  type: 'success'
                });
                setTimeout(function () {
                  _this.$router.push({path:'/home'})
                },1000)
              }
            }
          })
        },
        fanhuifn() {
          this.$router.push({path:'home'})
        },
        getdata() {//获取商品数据
          let _this = this
          $.ajax({
            url:this.apis+'/admin/Goods/ShowGoods',
            data:{
              goods_id:this.goods_id
            },
            type:'post',
            headers:{
              'token':localStorage.getItem('token')
            },
            success:function (res) {
              console.log(res)
              _this.productobj.goods_cate_id = res.data.goods_cate_id
              _this.productobj.goods_describe = res.data.goods_describe
              _this.productobj.goods_id = res.data.id
              _this.productobj.goods_is_recommend = res.data.goods_is_recommend
              _this.productobj.goods_name = res.data.goods_name
              _this.productobj.goods_original_price = res.data.goods_original_price
              _this.productobj.goods_present_price = res.data.goods_present_price
              _this.upimg = []
              for (let i = 0; i < res.data.goods_imgs.length;i++){
                _this.upimg.push({img:res.data.goods_imgs[i]})
              }
            }
          })
        },
        getcat() {//获取商品分类
          let _this = this
          $.ajax({
            url: this.apis+'/common/Goodscate/goodsCateList',
            data:{},
            type:'post',
            headers:{
              'token':localStorage.getItem('token')
            },
            success:function (res) {
              _this.options = res.data
            }
          })
        },
      },
      created() {
        this.goods_id = this.$route.query.id
        this.getcat()
        this.getdata()
      },
    }
</script>

<style scoped  lang="less">
  .goods_edit_box{
    width: 100%;
    height: 100%;
    min-width: 1350px;
    .content{
      width: 87%;
      margin-left: 200px;
      .content_box{
        width: 100%;
        background-color: #f2f2f2;
        padding: 25px;
        box-sizing: border-box;
        .content_head{
          width: 100%;
          padding: 15px 30px;
          box-sizing: border-box;
          font-size: 12px;
          border-bottom: 1px solid #e4e4e4;
          display: flex;
          justify-content: space-between;
          background-color: white;
          border-bottom: 1px solid #e4e4e4;
          .head_left{
            height: 40px;
            line-height: 40px;
          }
          .head_right{
            width: 98px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: white;
            font-size: 14px;
            background-color: #409EFF;
            border-radius: 5px;
            cursor: pointer;
          }
        }
        .content_item{
          width: 100%;
          background-color: white;
          padding-left: 210px;
          box-sizing: border-box;
          .row_i{
            width: 100%;
            height: 70px;
            line-height: 40px;
            padding: 15px 0;
            box-sizing: border-box;
            display: flex;
            span{
              height: 40px;
              line-height: 40px;
              margin-right: 15px;
            }
            .el-radio{
              margin-top: 15px;
            }
            .inputS,.el-autocomplete{
              width: 400px;
            }
            .divbox{
              height: 20px;
              line-height: 20px;
              color: white;
              text-align: center;
              border-radius: 4px;
              font-size: 14px;
              padding: 10px 18px;
              background-color: #409EFF;
              cursor: pointer;
            }
            .divbox2{
              margin-left: 80px;
            }
          }
        }
      }
    }
  }

</style>
